<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>评价</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
        body{
            background: #f3f3f3;
            font-size: 14px;
        }
        .aui-icon-left{
            padding-left:10px;
        }

        .aui-slide-page-active{
            background: #327afa;
        }
        header {
            width: 100%;
            height: 45px;
            background: #fff;
            position: fixed !important;
            z-index: 9;
            margin-bottom: 15px;
            top: 0;
        }
        .win_title{
            text-align: center;
            width: 100%;
            line-height: 45px;
            height: 45px;
            font-size: 16px;
        }
        .aui-iconfont{
         position: absolute;
        }
        .aui-list-view:after{
            border:none;
        }
        .aui-pull-right{
            margin-right:20px;
        }
        .cancel{
            background: #d7e5ff;
            border-color: #d7e5ff;
            color: #327afa;
            width: 50%;
            float: left;
        }
        .confirm{
            width: 50%;
            float: left;
        }
        input[type="password"]{
            line-height: 25px;
            margin: 0;
            width: inherit;
            padding: 0;
            border: 0;
        }
        .myBtn{
            position: fixed;
            bottom: 0;
        }
        .contain{
            margin-bottom: 55px;
            margin-top: 55px;
        }
        .evaluateInfo{
            padding:15PX;
            background: #FFF;
        }
        .proInfo img{
            float: left;
            width: 60px;
            min-width: 60px;
            margin-right: 8px;
        }
        .good-price{
            margin-top: 3px;
        }
        .evualuateLilst li{
            margin-top: 5px;
            overflow: hidden;
        }
        .aui-icon-favorfill{
            position: relative;
            color: #d9d9d9;
            font-size: 18px;
        }
        .aui-icon-favorfill.active{
            color: #ff3333 !important;
        }
        textarea{
            margin: 0;
            height: 100px;
            overflow-y: auto;
        }
        .sumRed{
            color:red;
            font-weight: bold;
        }
        .evaluteValue{
            display: block;
            border: 1px solid #d9d9d9;
            float: left;
            padding: 5px 12px;
            border-radius: 5px;
            margin-right: 10px;
            margin-top: 5px;
            position: relative;
        }
        .evaluteValue.active{
            border-color: #327afa;
        }
        .evaluteValue.active:before{
          content:"";
          position: absolute;
          width: 0;
          height: 0;
          border-right:22px solid #327afa;
          border-top:15px solid transparent;
          bottom: 0;
          right: 0;
        }
        .evaluteValue.active:after{
          content:"\e645";
          position: absolute;
          bottom: -6px;
          right: 0;
          color: #fff;
          font-family: "auiicon" !important;
        }
        .waring,.manyiWaring{
            visibility:hidden;
            font-size: 12px;
        }
        .waring:not(:first-of-type){
            width: 100%;
            float: left;
            margin-top: 5px;
        }
        .compare{
            background: #fff;
            margin-top: 15px;
            padding: 15px;
        }
        .manyi{
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <header class="myBorder ">
        <div class="win_title aui-border-b"> 
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="">
                评价
            </div>
        </div> 
    </header>
    <div class="contain">  
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" >
                <div>订单号：2164001886177661</div>
                <div>下单时间：2016-08-11 12:15:30</div>
            </li>
        </ul>  
        <div class="evaluateInfo">
            <div class="proInfo">
                <img src="../image/shili.jpg" alt="">
                <div class="proTitle">
                    <div class="aui-ellipsis-2">婴儿毛巾浴巾六层蘑菇童被纯被纯棉被纯棉被纯棉a棉纱布毛巾被蘑菇吸水毛巾被45*45</div>
                    <div class="good-price">￥45.00</div>
                </div>
            </div>
            <div class="manyi">
                <span>货品满意度：</span>
                <i class="aui-iconfont aui-icon-favorfill"></i>
                <i class="aui-iconfont aui-icon-favorfill"></i>
                <i class="aui-iconfont aui-icon-favorfill"></i>
                <i class="aui-iconfont aui-icon-favorfill"></i>
                <i class="aui-iconfont aui-icon-favorfill"></i>
                <span class="manyiWaring active">*请评分</span>
            </div>
            <div>
                <textarea class="problemText" oninput="checkWord(this)" onpropertychange="checkWord(this)"   placeholder="请谈谈您对该产品的感受"></textarea>
                <span class="aui-pull-right">
                    <em class="sum ">0</em>/500
                </span>
                <div class="waring active">*请谈谈您对该货品的感受！</div>
            </div>
            <ul class="evualuateLilst">           
                <li>
                   <div class="evaluateTitle">面料</div>
                   <span class="evaluteValue " tapmode onclick="checkEvaluate(this)">符合预期</span>
                   <span class="evaluteValue" tapmode onclick="checkEvaluate(this)">以次充好</span>
                    <div class="waring active">*请选择您对面料的印象！</div>
                </li>           
                <li>
                   <div class="evaluateTitle">色牢度</div>
                   <span class="evaluteValue" tapmode onclick="checkEvaluate(this)">正常浮色</span>
                   <span class="evaluteValue" tapmode onclick="checkEvaluate(this)">轻微掉色</span>
                   <span class="evaluteValue" tapmode onclick="checkEvaluate(this)">严重掉色</span>
                    <div class="waring active">*请选择您对色牢度的印象！</div>
                </li>           
                <li>
                   <div class="evaluateTitle">材质</div>
                   <span class="evaluteValue" tapmode onclick="checkEvaluate(this)">符合预期</span>
                   <span class="evaluteValue" tapmode onclick="checkEvaluate(this)">以次充好</span>
                    <div class="waring active">*请选择您对色牢度的印象！</div>
                </li>
            </ul>
        </div>
        <ul class="compare">
            <li>
               供应商考评:<span class="comName">Aileen纱纺有限公司 </span>
            </li>     
            <li>
               <span>服务态度: </span>
               <i class="aui-iconfont aui-icon-favorfill active"></i>
               <i class="aui-iconfont aui-icon-favorfill active"></i>
               <i class="aui-iconfont aui-icon-favorfill active"></i>
               <i class="aui-iconfont aui-icon-favorfill active"></i>
               <i class="aui-iconfont aui-icon-favorfill"></i>
            </li>  
            <li>
               <span>到货速度: </span>
               <i class="aui-iconfont aui-icon-favorfill active"></i>
               <i class="aui-iconfont aui-icon-favorfill active"></i>
               <i class="aui-iconfont aui-icon-favorfill active"></i>
               <i class="aui-iconfont aui-icon-favorfill"></i>
               <i class="aui-iconfont aui-icon-favorfill"></i>
            </li>             
            
        </ul>
    </div>
    <footer>
        <div class="myBtn" tapmode onclick="submitEvaluate()">提交</div> 
    </footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
   apiready = function() {
       api.parseTapmode();
       var mobile = api.pageParam.mobile;
       var header = $api.dom('header');
       var footer = $api.dom('footer');
       //$api.fixStatusBar(header);
       api.setStatusBarStyle({
             style : 'light'
       });
   }
   $(document).on("click",".manyi i",function(){
        $(this).parent().find("i").removeClass("active")
        var index=$(this).index();
        for (var i = 0; i <index; i++) {
            $(this).parent().find("i").eq(i).addClass("active");
        }
       $(this).parent().find(".manyiWaring").css({"visibility":"hidden"});
   })
   function checkWord(obj){
       var len=$(obj).val().length;
       $(".sum").text(len);
       var value=$(obj).val();
       if(len>=500){
           $(obj).val(value.substring(0,500));
           $(".sum").addClass("sumRed");
           api.toast({
               msg:"字数已超过500",
               duration:2000
           })
       }else{
           $(".sum").removeClass("sumRed");
           $(obj).parent().find(".waring").css({"visibility":"hidden"});

       }
   }
   function checkEvaluate(obj){
        $(obj).parent().find("span").removeClass("active");
        $(obj).addClass("active");
        $(obj).parent().find(".waring").css({"visibility":"hidden"});
   }
   function submitEvaluate(){
        // 判断感受
        var canSumbit=false;//是否可以提交
        if($(".problemText").val().trim()=="")
        {
          $(".problemText").parent().find(".waring").css({"visibility":"visible"});
        }else{
          $(".problemText").parent().find(".waring").css({"visibility":"hidden"});
          canSumbit=true;
        }
        // 判断评分
        var manyi=$(".manyi").find("i").hasClass("active");
        if(manyi){
            $(".manyi").find(".manyiWaring").css({"visibility":"hidden"});
        }else{
            $(".manyi").find(".manyiWaring").css({"visibility":"visible"});
        }
        // 判断选择的
        var result=false;
        $(".evualuateLilst").find("li").each(function(){
            $(this).find("span").each(function(){
                if($(this).hasClass("active")){
                    result=true;//存在active表示已经选择了
                    return false;
                }
            })
            if(!result){
                $(this).find(".waring").css({"visibility":"visible"});
            }else{
                $(this).find(".waring").css({"visibility":"hidden"});
            }
            result=false;
        })
        //判断是否可以提交
        if(($(".waring").css("visibility")=="hidden")&&($(".manyiWaring").css("visibility")=="hidden")){
            alert("提交成功");
        }else{
            alert("请完成填写")
        }

   }

</script>
</html>
